<template>
  <div class="app-container">
    <div class="customContainer">
      <!-- 搜索头 -->

      <el-form :model="formInline" :inline="true" size="small">
        <el-form-item>
          <el-select
            filterable
            placeholder="选择门店"
            v-model="formInline.store_id"
            style="width:300px"
          >
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick">
            <template #default>搜索</template>
          </dj-button>
        </el-form-item>
      </el-form>

      <!-- 表格 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="mini">
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="门店" prop="name"></el-table-column>
        <el-table-column align="center" label="赔币额度（周）">
          <template slot-scope="scope">
            <div>
              <el-input v-if="scope.row.isSave==1" :maxlength="6" v-model="scope.row.peibi_limit"></el-input>
              <div style="height:40px;line-height:40px" v-else>{{scope.row.peibi_limit}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="当前使用额度" prop="peibi"></el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.isSave==1"
              @click="saveClick(1,scope.row,scope.$index)"
              type="primary"
              size="small"
            >保存</el-button>
            <el-button
              v-else
              @click="saveClick(0,scope.row,scope.$index)"
              type="primary"
              size="small"
            >修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination
        class="pull-left"
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="totalDataNumber"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getList,
  getStoreList,
  saveData,
} from "@/api/member/payForCoinsManage";
import { integer0to999999 } from "@/utils/validate";
export default {
  data() {
    return {
      list: null,
      isDisabled: true,
      listLoading: false,
      storeList: [],
      currentPage: 1,
      totalDataNumber: 1,
      oldList: null,
      formInline: {
        store_id: "",
        page: 0,
      },
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      if (!vm.list) {
        vm.getStore();
      }
    });
  },
  methods: {
    saveClick(i, row, index) {
      //console.log(row,index)
      if (i == 1) {
        if (!integer0to999999(row.peibi_limit)) {
          this.$message.error("赔币额度范围为0-999999的整数，请重新设置");
          return;
        }
        if (row.peibi_limit < row.peibi) {
          this.$message.error("赔币额度低于当前已使用额度，请重新设置");
          return;
        }
        if (this.oldList[index].peibi_limit == row.peibi_limit) {
          //console.log(this.oldList[index].peibi_limit,row.peibi_limit)
          row.isSave = 0;
          return;
        }
        saveData({
          store_id: row.id,
          ex_peibi_limit: this.oldList[index].peibi_limit * 100,
          now_peibi_limit: row.peibi_limit * 100,
        }).then((res) => {
          //console.log(res)
          if (res.code == 1) {
            this.$message.success(res.message);
            this.oldList[index].peibi_limit = row.peibi_limit;
            row.isSave = 0;
          } else {
            this.$message.error(res.message);
          }
        });
      } else {
        row.isSave = 1;
      }
    },
    searchClick() {
      this.fetchData();
    },
    getStore() {
      getStoreList({ category_id: 409 }).then((response) => {
        this.storeList = response;
        let data = response.filter(
          (res) => res.id == this.$store.getters.optionId
        );
        if (data.length > 0) {
          this.formInline.store_id = data[0].id;
        }
        if (this.list == null) {
          this.fetchData();
        }
        // this.t_store_list = response.filter(item => item.name !== '全门店');
      });
    },
    async fetchData() {
      this.listLoading = true;
      try {
        let res = await getList(this.formInline);
        //console.log(res)
        if (res.code == 1) {
          this.totalDataNumber = res.message[0].page_count * 1;
          res.message[1].forEach((val) => {
            val.peibi_limit /= 100;
            val.peibi /= 100;
            val.isSave = 0;
          });
          this.list = res.message[1];
          this.oldList = JSON.parse(JSON.stringify(this.list));
          //console.log(this.totalDataNumber)
        }
        this.listLoading = false;
      } catch (error) {
        this.listLoading = false;
      }
    },
    handleCurrentChange(val) {
      this.formInline.page = val - 1;
      this.fetchData();
    },
  },
};
</script>